<template>
  <div class="my-purchase">
    <el-page-header @back="goBack" content="我的购买"> </el-page-header>
    <el-tabs type="border-card" tab-position="left" @tab-click="switchTab" v-model="activeTab">
      <!-- 待支付 -->
      <el-tab-pane label="待支付" name="findOrderInP">
        <TabItem :order="order" tabItemType="pay" v-if="isHasOrder == true"></TabItem>
        <NoResult :msg="msg" v-else></NoResult>
      </el-tab-pane>
      <!-- 待发货 -->
      <el-tab-pane label="待发货" name="findCompletedOrder">
        <TabItem :order="order" tabItemType="send" v-if="isHasOrder == true"></TabItem>
        <NoResult :msg="msg" v-else></NoResult>
      </el-tab-pane>
      <!-- 待签收 -->
      <el-tab-pane label="待签收" name="findOrderToBeSigned">
        <TabItem :order="order" tabItemType="sign" v-if="isHasOrder == true"></TabItem>
        <NoResult :msg="msg" v-else></NoResult>
      </el-tab-pane>
      <!-- 已签收 -->
      <el-tab-pane label="已签收" name="findOrderSigned">
        <TabItem :order="order" tabItemType="normal" v-if="isHasOrder == true"></TabItem>
        <NoResult :msg="msg" v-else></NoResult>
      </el-tab-pane>
      <!-- 退款中 -->
      <el-tab-pane label="退款中" name="findOrderRefunding">
        <TabItem :order="order" tabItemType="normal" v-if="isHasOrder == true"></TabItem>
        <NoResult :msg="msg" v-else></NoResult>
      </el-tab-pane>
      <!-- 已过期 -->
      <el-tab-pane label="已过期" name="findInvalidOrder">
        <TabItem :order="order" tabItemType="normal" v-if="isHasOrder == true"></TabItem>
        <NoResult :msg="msg" v-else></NoResult>
      </el-tab-pane>
      <div class="pagination" v-if="isShowPagination == true">
        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="page">
        </el-pagination>
      </div>
    </el-tabs>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import { get, post } from '../api/request'
import NoResult from '../components/NoResult.vue'
import TabItem from '../components/TabItem.vue'
const router = useRouter()

const userId = ref(0), //用户Id
  message = ref(""), //消息提示
  send = ref(""), //配送方式
  order = ref(), //订单信息
  total = ref(0), //分页总数
  pageSize = ref(5), //每页数量
  isShowPagination = ref(false), //是否展示分页
  activeTab = ref('findOrderInP'), //默认选中的tab
  path = ref(""), //根据tab.name而变化的path，从而发送不同请求
  isHasOrder = ref(false), //是否有订单数据
  msg = ref("")//没有数据时的信息提示

const goBack = () => {
  router.push('/allGoods')
}
onMounted(() => {
  // this.userId = this.$store.getters.getUserId
  path.value = 'findOrderInP'
  findOrder(path.value, userId.value, 1, pageSize.value)
})

//查询订单
function findOrder(path, userId, pageNum, pageSize) {
  // get('api', /)
  console.log(path);
  console.log(userId);
  console.log(pageNum);
  console.log(pageSize);
}
//切换分页
function page(currentPage) {
  findOrder(path, userId, currentPage, pageSize)
}
//切换tab
function switchTab(tab) {
  path.value = tab.props.name
  findOrder(path.value, userId.value, 1, pageSize.value)
}
</script> 
<style scoped>
.my-purchase {
  margin: 0 auto;
  padding: 12px 12px;
  width: 1200px;
  background-color: #f1f1f1;
}

.el-tabs {
  margin: 10px auto;
}

.my-purchase :deep(.is-active) {
  color: var(--primary-color) !important;
  font-size: 16px;
  font-weight: 500;
}

.my-purchase :deep(.el-tabs__item):hover {
  color: var(--primary-color) !important;
  font-size: 16px;
  font-weight: 500;
}

.pagination {
  width: 100%;
  height: 40px;
  margin: 10px 0;
  display: flex;
  justify-content: center;
}

.pagination :deep(.el-pagination.is-background) .el-pager li:not(.disabled).active {
  background-color: var(--primary-color);
  color: #ffffff;
}

.pagination :deep(.el-pagination.is-background) .el-pager li:not(.disabled) {
  color: #424242;
}

.el-tab-pane {
  padding: 20px 0 60px;
}
</style>
